<template>
	<view class="detail-main">
		<uv-swiper :list="carInfo.imglist" imgMode="aspectFill" :radius='0' :indicator="true" :height="250"
			@click="showswiper"></uv-swiper>
		<uv-image v-if="custm.danbaoimg1" :src="custm.danbaoimg1" width="750rpx" height="100rpx"
			@click="showdanbaoimg"></uv-image>
		<view class="uv-card">
			<view class="cartitle">{{carInfo.brand}}{{carInfo.cartype}}</view>
			<view class="carprice margin-top-xs">
				<text class="price">{{carInfo.money}}万</text>
				<text class="guidprice">新车价{{carInfo.guideprice}}万</text>
				<text class="publish">{{carInfo.publishtime}}发布</text>

			</view>
		</view>
		<view class="uv-card car_report">
			<view class="report_item danger_item" @click="imgPreview('chuxian')">
				<image src="../../static/report02.png" mode="widthFix"></image>
				出险报告
			</view>
			<view class="report_item" @click="imgPreview('weibao')">
				<image src="../../static/report01.png" mode="widthFix"></image>
				维保报告
			</view>

		</view>

		<view class="uv-card">
			<view class="uv-card_title text-lg text-bold margin-bottom-sm">车辆档案</view>
			<view class="uv-card_body">
				<view class="car-info">
					<view class="car-info_item" v-for="item in carInfo.info_datas" :key="item.key">
						<view class="data-info">
							<uv-text type="info" :text="item.name" :size="12" />
							<view class="margin-top-xs"><uv-text :text="item.value" /></view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="uv-card">
			<view class="uv-card_title text-lg text-bold margin-bottom-sm">车辆介绍</view>
			<view class="uv-card_body">
				<uv-text :text="carInfo.content"></uv-text>
			</view>
		</view>
		<fy-user-desc :userInfo="userInfo"></fy-user-desc>

		<fy-user-nav :user-info="userInfo" :canvelist="canvlist" :isPoster="true" :copyText="copytext"
			@getmpwxicon="getmpwxicon"></fy-user-nav>
		<view style="height: 110rpx;"></view>
		<uv-popup ref="ref_preview">
			<scroll-view :scroll-y="true" :style="{height:screenheight+'px'}" :show-scrollbar="true">
				<uv-image :src="popupimg" :customStyle="popupStyle"></uv-image>
			</scroll-view>

		</uv-popup>
	</view>
</template>

<script>
	import { queryCarInfo, queryUserInfo, getUnlimitedQRCode, getDanbaoImg } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { timespantoYMD } from '@/common/tools.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				carInfo: {
					info_datas: []
				},
				popupimg: '',
				popupStyle: {

				},
				screenheight: 0,
				userInfo: {},
				urlparm: {},
				imghost: baseconfig.api_url,
				wxmpicon: '',
				canvlist: [],
				copytext: '',
				danbao: {
					danbaoimg1: '',
					danbaoimg2: ''
				}
			}
		},
		onReady() {
			this.screenheight = uni.getSystemInfoSync().screenHeight - 60
		},
		onLoad(option) {
			if (option.scene) {
				var scene = decodeURIComponent(option.scene)
				let parms = scene.split("&")
				parms.forEach(arr => {
					const [k, v] = arr.split("=")
					this.urlparm[k] = v
				})
			} else {

				this.urlparm = option
			}
			// getDanbaoImg().then(res => {
			// 	const { data } = res
			// 	this.danbao = data
			// })
			this.fetchData()
			this.fetchUser()

		},
		computed: {
			...mapState({
				token: state => state.user.token,
				custm:state=>state.setting.custm
			})
		},
		methods: {
			showdanbaoimg() {
				uni.previewImage({
					urls: [ this.custm.danbaoimg2]
				})
			},
			showswiper(index) {
				uni.previewImage({
					urls: this.carInfo.imglist,
					current: index
				})
			},
			imgPreview(type) {
				if (!this.token) {
					uni.showModal({
						title: "温馨提醒",
						content: '需登录后查看',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({ url: '/pages/auth/login' })
							}
						}
					})
					return
				}

				switch (type) {
					case 'chuxian':
						this.popupimg = this.carInfo.chuxiansrc ? baseconfig.api_url + this.carInfo.chuxiansrc : ""
						break
					case 'weibao':
						this.popupimg = this.carInfo.weibaosrc ? baseconfig.api_url + this.carInfo.weibaosrc : ""
						break
				}
				if (!this.popupimg) {
					uni.showToast({
						title:"报告暂未上传",
						icon:"error"
					})
					return
				}
				
				this.$refs.ref_preview.open()
				uni.getImageInfo({
					src: this.popupimg,
					success: (res) => {
						let width = res.width;
						let height = res.height;
						let ratio = height / width;
						let screenWidth = uni.getSystemInfoSync().screenWidth;
						let popupWidth = screenWidth * 0.8
						let popupHeight = popupWidth * ratio;
						this.popupStyle = {
							width: popupWidth + 'px',
							height: popupHeight + 'px'
						};

					},
				})
			},
			getmpwxicon() {
				var scene = `carid=${this.carInfo.id}&userid=${this.userInfo.id}`
				var env_version = "release"
				// #ifdef H5
				env_version = process.env.NODE_ENV == 'development' ? 'develop' : 'release'
				// #endif
				// #ifdef MP-WEIXIN
				env_version = __wxConfig.envVersion
				// #endif
				//	env_version	string	否	要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
				let parm = { page: 'pages/car/detail', scene: scene, env_version: env_version, check_path: false }
				getUnlimitedQRCode(parm).then(res => {
					this.wxmpicon = res.data
					this.makecanveList()
				})

			},
			makecanveList() {
				//width 750 height 1250
				//顶部图 上下左右30 
				var textData = '瑕疵车\r'

				textData += `【车辆型款】：${this.carInfo.brand} ${this.carInfo.cartype}\r`
				textData += `【售    价】：${this.carInfo.money}万\r`
				textData += `【指 导 价】：${this.carInfo.money}万\r`

				let list = []
				list.push({
					type: 'image',
					x: 30,
					y: 30,
					content: this.carInfo.imglist[0],
					height: 350,
					width: 690,
					arcR: 20
				})
				//车名
				list.push({
					type: 'text',
					x: 30,
					y: 440,
					content: `${this.carInfo.brand} ${this.carInfo.cartype}`,
					size: 40,
					font: 'normal bold 40px 微软雅黑',
				})
				//报价 发布时间
				list.push({ type: 'text', x: 30, y: 500, color: '#ff3600', content: `${this.carInfo.money}万`, size: 40, })
				list.push({
					type: 'text',
					x: 180,
					y: 500,
					color: '#909399',
					content: `新车价 ${this.carInfo.guideprice}万`,
					size: 24
				})
				list.push({ type: 'text', x: 450, y: 500, content: `${this.carInfo.publishtime}发布`, size: 25, })
				//车辆档案
				list.push({ type: 'text', x: 30, y: 590, content: `车辆档案`, size: 40, font: 'normal bold 40px 微软雅黑', })

				let _l = parseInt(this.carInfo.info_datas.length / 3)
				for (let i = 0; i <= _l; i++) {
					for (let j = 0; j < 3; j++) {
						if ((i * 3 + j) < this.carInfo.info_datas.length) {

							let item_1 = this.carInfo.info_datas[i * 3 + j]

							textData += `【${item_1.name}】：${item_1.value}\r`
							list.push({
								type: 'text',
								x: 30 + j * 230,
								y: 640 + i * 100,
								color: '#909399',
								content: `${item_1.name}`,
								size: 25,
							})
							list.push({
								type: 'text',
								x: 30 + j * 230,
								y: 690 + i * 100,
								content: `${item_1.value}`,
								size: 35,
							})

						}
					}
				}

				textData += `【车辆介绍】：${this.carInfo.content}\r`
				//车辆描述
				list.push({ type: 'text', x: 30, y: 850, content: `车辆描述`, size: 40, font: 'normal bold 40px 微软雅黑', })
				list.push({ type: 'text', x: 30, y: 900, content: `${this.carInfo.content}`, size: 35 })
				//小程序码
				list.push({ type: 'image_base64', content: this.wxmpicon, x: 440, y: 1040, width: 280, height: 280 })

				this.canvlist = list
				this.copytext = textData
			},
			navclick(e) {
				const { index, content } = e
				switch (index) {
					case 0:
						uni.switchTab({ url: '/pages/index/index' })
						break
					case 1:

						break
				}
			},
			fetchUser() {
				queryUserInfo(this.urlparm.userid).then(res => {
					const { data } = res
					data.userimgsrc = data.imgsrc ? baseconfig.api_url + data.imgsrc : ''
					var t = data.ipplace.split(' ')
					data.area = t[2]
					this.userInfo = data
				})
			},
			fetchData() {

				queryCarInfo({ id: this.urlparm.carid }).then(res => {
					const { car, userinfo } = res.data

					var imglist = car.imgsrc ? car.imgsrc.split(',') : []
					car.imglist = []
					imglist.forEach(arr => {
						car.imglist.push(baseconfig.api_url + arr)
					})
					var car_info_datas = []
					// let keys = [{ key: 'platelocation', name: "车牌归属地", value: '' },
					// 	{ key: 'standard', name: "排放标准", value: '' },
					// 	{ key: 'outputval', name: "排量/变速箱", value: '' },
					// 	{ key: 'location', name: "车辆所在地", value: '' },
					// 	{ key: 'used', name: "使用性质", value: '' },
					// 	{ key: 'transferno', name: "过户次数", value: '' },
					// 	{ key: 'energytype', name: "能源类型", value: '' },
					// ]

					let keys = [
						{ key: 'location', name: "车辆所在地", value: '' },
						// { key: 'standard', name: "排放标准", value: '' },
						{ key: 'outputval', name: "排量", value: '' },
						{ key: 'energytype', name: "能源类型", value: '' }
						// { key: 'used', name: "使用性质", value: '' },
						// { key: 'transferno', name: "过户次数", value: '' },
						// { key: 'energytype', name: "能源类型", value: '' },
					]
					car.info_datas = []
					keys.forEach(arr => {
						var _v = car[arr.key]
						// if (arr.key == 'outputval') {
						// 	var gearbox = car['gearbox'] ? car['gearbox'] : '-'

						// 	_v = `${_v}/${gearbox}`
						// }
						if (arr.key == 'platelocation') {
							_v = _v.split(" ")[1]
						}


						if (_v != null && _v != undefined && _v !== '') {
							arr.value = _v
							car.info_datas.push(arr)
						}
					})

					car.publishtime = timespantoYMD(car.createtime)

					this.carInfo = car

					//	this.makecanveList()

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.detail-main {
		.cartitle {
			width: 100%;
			font-size: 32rpx;
			font-weight: 800;
		}

		.car_report {
			display: flex;

			.report_item {
				flex: 1;
				border: 1upx #5293e9 solid;
				text-align: center;
				height: 90upx;
				line-height: 90upx;
				border-radius: 45upx;
				background: #edf7fd;
				margin: 0 20upx;
			}
		}

		.car_report .report_item.danger_item {
			border: 1upx #fc4848 solid;
			background: #fcf2f2;
			margin-left: 20upx;
		}

		.report_item image {
			width: 50upx;
			height: 50upx;
			vertical-align: middle;
			margin: -6upx 10upx 0 0;
		}

		.carprice {

			.price {
				font-size: 38rpx;
				color: #ff3600;
				font-weight: bold;
			}

			.guidprice {
				font-size: 28upx;
				margin-left: 16upx;
				color: #555;
			}

			.publish {
				float: right;
				color: #999;
				padding-top: 12upx;
				font-size: 24upx;
			}

		}

		.car-info {
			width: 100%;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;

			&_item {
				width: 33.333333333333336%;
				justify-content: center;
				flex-direction: column;
				box-sizing: border-box;
				display: flex;
				position: relative;
				float: left;
				align-items: flex-start;

				.data-info {

					margin: 5px 2px;

					.uv-text {
						margin-top: 5px;
					}
				}

			}
		}
	}


	.cardatas {}
</style>